



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/test-blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/test-blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="blog-of-codesigner(顾炯洋)" href="http://gujyang.gitee.io/test-blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="blog-of-codesigner(顾炯洋)" href="http://gujyang.gitee.io/test-blog/atom.xml" />
<link rel="alternate" type="application/json" title="blog-of-codesigner(顾炯洋)" href="http://gujyang.gitee.io/test-blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/test-blog/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="可视化学习" />


<link rel="canonical" href="http://gujyang.gitee.io/test-blog/2024/02/08/after-three-1/">



  <title>
测试博客 - 可视化学习 |
Codesigner = blog-of-codesigner(顾炯洋) = 记录成长</title>
<meta name="generator" content="Hexo 7.0.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">测试博客
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2024-02-08 21:23:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2024-02-08T21:23:00+08:00">2024-02-08</time>
  </span>
  <span class="item" title="本文字数">
    <span class="icon">
      <i class="ic i-pen"></i>
    </span>
    <span class="text">本文字数</span>
    <span>14k</span>
    <span class="text">字</span>
  </span>
  <span class="item" title="阅读时长">
    <span class="icon">
      <i class="ic i-clock"></i>
    </span>
    <span class="text">阅读时长</span>
    <span>12 分钟</span>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/test-blog/" rel="start">Codesigner</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
          <img src="https://gujyang.gitee.io/image-save-5/after-three/1/banner.png">
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/test-blog/">首页</a></span><i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/test-blog/categories/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%AD%A6%E4%B9%A0/" itemprop="item" rel="index" title="分类于 可视化学习"><span itemprop="name">可视化学习</span></a>
<meta itemprop="position" content="1" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="http://gujyang.gitee.io/test-blog/2024/02/08/after-three-1/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/test-blog/images/avatar.jpg">
    <meta itemprop="name" content="顾炯洋/codesigner">
    <meta itemprop="description" content="记录成长, 记录成长">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="blog-of-codesigner(顾炯洋)">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <h1 id="前言"><a class="markdownIt-Anchor" href="#前言">#</a> 前言</h1>
<p>公司项目进入收尾阶段，我本人感冒也好了，这段时间将提升更新频率，敬请期待～<br />
 本篇文章回顾一下之前的灯光和阴影的基础知识，就稍微讲一下，本篇文章会比之前的灯光文章稍微详细一点，大家当然可以和之前的文章对比学习一下。之前文章地址:<span class="exturl" data-url="aHR0cHM6Ly9ndWp5YW5nLmdpdGVlLmlvL215YmxvZy8yMDIzLzA1LzIxL3RocmVlLTcv">https://gujyang.gitee.io/myblog/2023/05/21/three-7/</span></p>
<h2 id="灯光和阴影"><a class="markdownIt-Anchor" href="#灯光和阴影">#</a> 灯光和阴影</h2>
<h3 id="基础创建和物体环境贴图添加"><a class="markdownIt-Anchor" href="#基础创建和物体环境贴图添加">#</a> 基础创建和物体环境贴图添加</h3>
<p>依赖安装那些我就不说了哈，我直接贴基础代码了，这里添加了一个场景和几个物体<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入threejs</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="variable constant_">THREE</span> <span class="keyword">from</span> <span class="string">&quot;three&quot;</span>;</span><br><span class="line"><span class="comment">// 导入轨道控制器</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">OrbitControls</span> &#125; <span class="keyword">from</span> <span class="string">&quot;three/examples/jsm/controls/OrbitControls.js&quot;</span>;</span><br><span class="line"><span class="comment">// 导入lil.gui</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">GUI</span> &#125; <span class="keyword">from</span> <span class="string">&quot;three/examples/jsm/libs/lil-gui.module.min.js&quot;</span>;</span><br><span class="line"><span class="comment">// 导入hdr加载器</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">RGBELoader</span> &#125; <span class="keyword">from</span> <span class="string">&quot;three/examples/jsm/loaders/RGBELoader.js&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建场景</span></span><br><span class="line"><span class="keyword">const</span> scene = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Scene</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建相机</span></span><br><span class="line"><span class="keyword">const</span> camera = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PerspectiveCamera</span>(</span><br><span class="line">  <span class="number">45</span>, <span class="comment">// 视角</span></span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">innerWidth</span> / <span class="variable language_">window</span>.<span class="property">innerHeight</span>, <span class="comment">// 宽高比</span></span><br><span class="line">  <span class="number">0.1</span>, <span class="comment">// 近平面</span></span><br><span class="line">  <span class="number">1000</span> <span class="comment">// 远平面</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建渲染器</span></span><br><span class="line"><span class="keyword">const</span> renderer = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">WebGLRenderer</span>(&#123;</span><br><span class="line">  <span class="attr">antialias</span>: <span class="literal">true</span>, <span class="comment">// 开启抗锯齿</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 设置渲染器允许投射阴影</span></span><br><span class="line"><span class="comment">// renderer.shadowMap.enabled = true;</span></span><br><span class="line">renderer.<span class="title function_">setSize</span>(<span class="variable language_">window</span>.<span class="property">innerWidth</span>, <span class="variable language_">window</span>.<span class="property">innerHeight</span>);</span><br><span class="line">renderer.<span class="property">outputColorSpace</span> = <span class="variable constant_">THREE</span>.<span class="property">SRGBColorSpace</span>;</span><br><span class="line">renderer.<span class="property">toneMapping</span> = <span class="variable constant_">THREE</span>.<span class="property">ACESFilmicToneMapping</span>;</span><br><span class="line">renderer.<span class="property">toneMappingExposure</span> = <span class="number">1</span>;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(renderer.<span class="property">domElement</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置相机位置</span></span><br><span class="line">camera.<span class="property">position</span>.<span class="property">z</span> = <span class="number">15</span>;</span><br><span class="line">camera.<span class="property">position</span>.<span class="property">y</span> = <span class="number">2.4</span>;</span><br><span class="line">camera.<span class="property">position</span>.<span class="property">x</span> = <span class="number">0.4</span>;</span><br><span class="line">camera.<span class="title function_">lookAt</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加世界坐标辅助器</span></span><br><span class="line"><span class="keyword">const</span> axesHelper = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">AxesHelper</span>(<span class="number">5</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(axesHelper);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加轨道控制器</span></span><br><span class="line"><span class="keyword">const</span> controls = <span class="keyword">new</span> <span class="title class_">OrbitControls</span>(camera, renderer.<span class="property">domElement</span>);</span><br><span class="line"><span class="comment">// 设置带阻尼的惯性</span></span><br><span class="line">controls.<span class="property">enableDamping</span> = <span class="literal">true</span>;</span><br><span class="line"><span class="comment">// 设置阻尼系数</span></span><br><span class="line">controls.<span class="property">dampingFactor</span> = <span class="number">0.05</span>;</span><br><span class="line"><span class="comment">// 设置旋转速度</span></span><br><span class="line"><span class="comment">// controls.autoRotate = true;</span></span><br><span class="line">controls.<span class="title function_">addEventListener</span>(<span class="string">&quot;change&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  renderer.<span class="title function_">render</span>(scene, camera);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 渲染函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">animate</span>(<span class="params"></span>) &#123;</span><br><span class="line">  controls.<span class="title function_">update</span>();</span><br><span class="line">  <span class="title function_">requestAnimationFrame</span>(animate);</span><br><span class="line">  <span class="comment">// 渲染</span></span><br><span class="line">  renderer.<span class="title function_">render</span>(scene, camera);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">animate</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听窗口变化</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;resize&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 重置渲染器宽高比</span></span><br><span class="line">  renderer.<span class="title function_">setSize</span>(<span class="variable language_">window</span>.<span class="property">innerWidth</span>, <span class="variable language_">window</span>.<span class="property">innerHeight</span>);</span><br><span class="line">  <span class="comment">// 重置相机宽高比</span></span><br><span class="line">  camera.<span class="property">aspect</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span> / <span class="variable language_">window</span>.<span class="property">innerHeight</span>;</span><br><span class="line">  <span class="comment">// 更新相机投影矩阵</span></span><br><span class="line">  camera.<span class="title function_">updateProjectionMatrix</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建GUI</span></span><br><span class="line"><span class="keyword">const</span> gui = <span class="keyword">new</span> <span class="title function_">GUI</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// rgbeLoader 加载hdr贴图</span></span><br><span class="line"><span class="keyword">let</span> rgbeLoader = <span class="keyword">new</span> <span class="title class_">RGBELoader</span>();</span><br><span class="line">rgbeLoader.<span class="title function_">load</span>(<span class="string">&quot;./texture/Video_Copilot-Back Light_0007_4k.hdr&quot;</span>, <span class="function">(<span class="params">envMap</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 设置球形贴图</span></span><br><span class="line">  envMap.<span class="property">mapping</span> = <span class="variable constant_">THREE</span>.<span class="property">EquirectangularReflectionMapping</span>;</span><br><span class="line">  <span class="comment">// 设置环境贴图</span></span><br><span class="line">  scene.<span class="property">background</span> = envMap;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> geometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">TorusKnotGeometry</span>(<span class="number">1</span>, <span class="number">0.3</span>, <span class="number">100</span>, <span class="number">16</span>);</span><br><span class="line"><span class="keyword">const</span> material1 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="number">0xccccff</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> torusKnot = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(geometry, material1);</span><br><span class="line">torusKnot.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">4</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(torusKnot);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> sphereGeometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">SphereGeometry</span>(<span class="number">1</span>, <span class="number">32</span>, <span class="number">32</span>);</span><br><span class="line"><span class="keyword">const</span> material2 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="number">0xffffff</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> sphere = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(sphereGeometry, material2);</span><br><span class="line">scene.<span class="title function_">add</span>(sphere);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> boxGeometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">BoxGeometry</span>(<span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">const</span> material3 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="number">0xffcccc</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> box = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(boxGeometry, material3);</span><br><span class="line">box.<span class="property">position</span>.<span class="title function_">set</span>(-<span class="number">4</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(box);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建平面</span></span><br><span class="line"><span class="keyword">let</span> planeGeometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PlaneGeometry</span>(<span class="number">24</span>, <span class="number">24</span>, <span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">let</span> planeMaterial = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="number">0x999999</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">let</span> planeMesh = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(planeGeometry, planeMaterial);</span><br><span class="line">planeMesh.<span class="property">rotation</span>.<span class="property">x</span> = -<span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">2</span>;</span><br><span class="line">planeMesh.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, -<span class="number">1</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(planeMesh);</span><br></pre></td></tr></table></figure></p>
<p>此时的效果图大概如下<br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect1.png" alt="效果图" /></p>
<h3 id="环境光"><a class="markdownIt-Anchor" href="#环境光">#</a> 环境光</h3>
<p>此时如果要让物体亮起来，就需要添加光源，这里我们添加一个环境光<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加环境光</span></span><br><span class="line"><span class="keyword">let</span> ambientLight = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">AmbientLight</span>(<span class="number">0xffffff</span>, <span class="number">0.1</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(ambientLight);</span><br></pre></td></tr></table></figure><br />
 此时效果图如下:<br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect2.png" alt="效果图" /></p>
<h3 id="平行光"><a class="markdownIt-Anchor" href="#平行光">#</a> 平行光</h3>
<p>如果我们要让平面亮起来以及物体有阴影，就需要添加平行光<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加平行光</span></span><br><span class="line"><span class="keyword">let</span> directionalLight = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">DirectionalLight</span>(<span class="number">0xffffff</span>, <span class="number">0.6</span>);</span><br><span class="line">directionalLight.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">10</span>, <span class="number">10</span>, <span class="number">0</span>);</span><br><span class="line"><span class="comment">// 默认平行光的目标是原点</span></span><br><span class="line">directionalLight.<span class="property">target</span>.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(directionalLight);</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect3.png" alt="效果图" /></p>
<h3 id="平行光辅助器"><a class="markdownIt-Anchor" href="#平行光辅助器">#</a> 平行光辅助器</h3>
<p>我们在开发的时候，完全可以把平行光的辅助器给打开<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加平行光辅助器</span></span><br><span class="line"><span class="keyword">let</span> directionalLightHelper = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">DirectionalLightHelper</span>(directionalLight);</span><br><span class="line">scene.<span class="title function_">add</span>(directionalLightHelper);</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect4.png" alt="效果图" /></p>
<h3 id="接受阴影和投射阴影"><a class="markdownIt-Anchor" href="#接受阴影和投射阴影">#</a> 接受阴影和投射阴影</h3>
<p>这个我们之前就说过了，总共分四步</p>
<ol>
<li>设置渲染器允许投射阴影</li>
<li>设置平行光允许投射阴影</li>
<li>设置平面接受阴影</li>
<li>设置物体投射接受阴影</li>
</ol>
<h4 id="设置渲染器允许投射阴影"><a class="markdownIt-Anchor" href="#设置渲染器允许投射阴影">#</a> 设置渲染器允许投射阴影</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置渲染器允许投射阴影</span></span><br><span class="line">renderer.<span class="property">shadowMap</span>.<span class="property">enabled</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure></p>
<h4 id="设置平行光允许投射阴影"><a class="markdownIt-Anchor" href="#设置平行光允许投射阴影">#</a> 设置平行光允许投射阴影</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置光投射阴影</span></span><br><span class="line">directionalLight.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure></p>
<h4 id="设置平面接受阴影"><a class="markdownIt-Anchor" href="#设置平面接受阴影">#</a> 设置平面接受阴影</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置接收阴影</span></span><br><span class="line">planeMesh.<span class="property">receiveShadow</span> = <span class="literal">true</span>;</span><br><span class="line">planeMesh.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure></p>
<h4 id="设置物体投射接受阴影"><a class="markdownIt-Anchor" href="#设置物体投射接受阴影">#</a> 设置物体投射接受阴影</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">sphere.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br><span class="line">sphere.<span class="property">receiveShadow</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect5.png" alt="效果图" /></p>
<h4 id="阴影裁剪问题"><a class="markdownIt-Anchor" href="#阴影裁剪问题">#</a> 阴影裁剪问题</h4>
<h5 id="问题描述与产生原因"><a class="markdownIt-Anchor" href="#问题描述与产生原因">#</a> 问题描述与产生原因</h5>
<p>我们将平行光进行调整<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">directionalLight.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, <span class="number">10</span>, <span class="number">0</span>);</span><br></pre></td></tr></table></figure><br />
 添加 gui 的数据<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gui.<span class="title function_">add</span>(sphere.<span class="property">position</span>, <span class="string">&quot;z&quot;</span>, -<span class="number">10</span>, <span class="number">10</span>).<span class="title function_">name</span>(<span class="string">&quot;z&quot;</span>);</span><br></pre></td></tr></table></figure><br />
<div class="media-container"><div class="player" data-type="video" data-src='[{"name":"问题视频展示","url":["https://gujyang.gitee.io/image-save-5/after-three/1/effect6.mov"]}]'></div></div><br />
 从上面这个视频我们可以看到我们的阴影被裁剪了，超出某个范围直接不见了<br />
这是因为我们的相机是一个正交相机，你可以想象为某个区域范围内，他将物体生成快照，这个范围内的物体才会有阴影这个东西。<br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect7.png" alt="效果图" /><br />
我画了一个示意图，差不多就是这个意思。</p>
<h5 id="解决方案"><a class="markdownIt-Anchor" href="#解决方案">#</a> 解决方案</h5>
<p>我们可以通过调整相机的范围来解决这个问题<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(directionalLight);</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">left</span> = -<span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">right</span> = <span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">top</span> = <span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">bottom</span> = -<span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">near</span> = <span class="number">0.5</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">far</span> = <span class="number">50</span>;</span><br></pre></td></tr></table></figure><br />
<div class="media-container"><div class="player" data-type="video" data-src='[{"name":"问题解决视频展示","url":["https://gujyang.gitee.io/image-save-5/after-three/1/effect8.mov"]}]'></div></div></p>
<h5 id="调整最远距离"><a class="markdownIt-Anchor" href="#调整最远距离">#</a> 调整最远距离</h5>
<p>这上面的六个属性就是这个正交相机的范围的六个面了，比如我们将最远的距离调整小<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">far</span> = <span class="number">5</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect9.png" alt="效果图" /><br />
同样的道理，如果我们调整最近的距离 near，或者其他的属性，只要这个相机形成的立方体不包括我们的物体，那么就会造成阴影缺失或者裁剪。</p>
<h4 id="阴影锯齿感"><a class="markdownIt-Anchor" href="#阴影锯齿感">#</a> 阴影锯齿感</h4>
<p>我们上面的阴影还有一个问题，就是锯齿感，这个问题我们可以通过调整阴影的纹理大小来解决，默认为 512，我们可以调整为 2048<br />
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置阴影的纹理大小</span></span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">width</span> = <span class="number">2048</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">height</span> = <span class="number">2048</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect10.png" alt="效果图" /><br />
当然，一切效果的提升也就意味着性能消耗的提升，这个大家可以在实际开发中自己权衡一下。</p>
<h2 id="聚光灯属性详解"><a class="markdownIt-Anchor" href="#聚光灯属性详解">#</a> 聚光灯属性详解</h2>
<h3 id="聚光灯添加并设置阴影"><a class="markdownIt-Anchor" href="#聚光灯添加并设置阴影">#</a> 聚光灯添加并设置阴影</h3>
<p>我们先要将上面的平行光环境光给注释掉<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> spotLight = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">SpotLight</span>(<span class="number">0xffffff</span>, <span class="number">2</span>);</span><br><span class="line">spotLight.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, <span class="number">10</span>, <span class="number">0</span>);</span><br><span class="line">spotLight.<span class="property">target</span>.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">spotLight.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br><span class="line">scene.<span class="title function_">add</span>(spotLight);</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect11.png" alt="效果图" /></p>
<h3 id="聚光灯辅助器"><a class="markdownIt-Anchor" href="#聚光灯辅助器">#</a> 聚光灯辅助器</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加聚光灯辅助器</span></span><br><span class="line"><span class="keyword">let</span> spotLightHelper = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">SpotLightHelper</span>(spotLight);</span><br><span class="line">scene.<span class="title function_">add</span>(spotLightHelper);</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect12.png" alt="效果图" /></p>
<h3 id="聚光灯角度"><a class="markdownIt-Anchor" href="#聚光灯角度">#</a> 聚光灯角度</h3>
<p>此时我们可以看到聚光灯的角度变小了<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">spotLight.<span class="property">angle</span> = <span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">8</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect13.png" alt="效果图" /></p>
<h3 id="聚光灯距离"><a class="markdownIt-Anchor" href="#聚光灯距离">#</a> 聚光灯距离</h3>
<p>默认我们的聚光灯是没有距离的，我们可以设置距离，又因为我们聚光灯效果是衰减的，当我们把距离设置小，而物体距离聚光灯结束的地方比较近的时候，就会出现聚光灯效果不明显的情况<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">spotLight.<span class="property">distance</span> = <span class="number">15</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect14.png" alt="效果图" /></p>
<h3 id="聚光灯衰减"><a class="markdownIt-Anchor" href="#聚光灯衰减">#</a> 聚光灯衰减</h3>
<p>此时我们将聚光灯的距离设置为 50<br />
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">spotLight.<span class="property">distance</span> = <span class="number">50</span>;</span><br></pre></td></tr></table></figure><br />
 这是我们正常的聚光灯<br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect15.png" alt="效果图" /></p>
<p>我们可以添加衰减，penumbra 是衰减的范围，decay 是衰减的速度<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">spotLight.<span class="property">penumbra</span> = <span class="number">0.5</span>;</span><br><span class="line">spotLight.<span class="property">decay</span> = <span class="number">2</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect16.png" alt="效果图" /></p>
<h3 id="阴影纹理大小"><a class="markdownIt-Anchor" href="#阴影纹理大小">#</a> 阴影纹理大小</h3>
<p>当然我们可以让阴影也清晰一点，没那么模糊有锯齿感<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">spotLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">width</span> = <span class="number">2048</span>;</span><br><span class="line">spotLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">height</span> = <span class="number">2048</span>;</span><br></pre></td></tr></table></figure></p>
<h2 id="点光源"><a class="markdownIt-Anchor" href="#点光源">#</a> 点光源</h2>
<p>这个点光源和我们的聚光灯属性是一样的，我这里就不多介绍了，将直接贴代码了，不贴图片了，点光源其实就是聚光灯从四面照过来，所以性能的消耗会比较大</p>
<h3 id="创建点光源"><a class="markdownIt-Anchor" href="#创建点光源">#</a> 创建点光源</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> pointLight = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PointLight</span>(<span class="number">0xffffff</span>, <span class="number">1</span>);</span><br><span class="line">pointLight.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, <span class="number">5</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(pointLight);</span><br></pre></td></tr></table></figure></p>
<h3 id="点光源阴影"><a class="markdownIt-Anchor" href="#点光源阴影">#</a> 点光源阴影</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pointLight.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure></p>
<h3 id="点光源辅助器"><a class="markdownIt-Anchor" href="#点光源辅助器">#</a> 点光源辅助器</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> pointLightHelper = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PointLightHelper</span>(pointLight);</span><br><span class="line">scene.<span class="title function_">add</span>(pointLightHelper);</span><br></pre></td></tr></table></figure></p>
<h3 id="点光源距离"><a class="markdownIt-Anchor" href="#点光源距离">#</a> 点光源距离</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pointLight.<span class="property">distance</span> = <span class="number">15</span>;</span><br></pre></td></tr></table></figure></p>
<h3 id="点光源衰减"><a class="markdownIt-Anchor" href="#点光源衰减">#</a> 点光源衰减</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">spotLight.<span class="property">penumbra</span> = <span class="number">0.5</span>;</span><br><span class="line">pointLight.<span class="property">decay</span> = <span class="number">2</span>;</span><br></pre></td></tr></table></figure></p>
<h3 id="点光源消除锯齿感"><a class="markdownIt-Anchor" href="#点光源消除锯齿感">#</a> 点光源消除锯齿感</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">pointLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">width</span> = <span class="number">2048</span>;</span><br><span class="line">pointLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">height</span> = <span class="number">2048</span>;</span><br></pre></td></tr></table></figure></p>
<h2 id="阴影作用透明度纹理与阴影常见问题"><a class="markdownIt-Anchor" href="#阴影作用透明度纹理与阴影常见问题">#</a> 阴影作用透明度纹理与阴影常见问题</h2>
<p>我先给其他俩物体加上阴影，并且将点光源距离变成 15</p>
<h3 id="调整阴影"><a class="markdownIt-Anchor" href="#调整阴影">#</a> 调整阴影</h3>
<h4 id="点光源距离-2"><a class="markdownIt-Anchor" href="#点光源距离-2">#</a> 点光源距离</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pointLight.<span class="property">distance</span> = <span class="number">15</span>;</span><br></pre></td></tr></table></figure></p>
<h4 id="box接受投射阴影"><a class="markdownIt-Anchor" href="#box接受投射阴影">#</a> box 接受投射阴影</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">box.<span class="property">receiveShadow</span> = <span class="literal">true</span>;</span><br><span class="line">box.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure></p>
<h4 id="torusknot接受投射阴影"><a class="markdownIt-Anchor" href="#torusknot接受投射阴影">#</a> torusKnot 接受投射阴影</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">torusKnot.<span class="property">receiveShadow</span> = <span class="literal">true</span>;</span><br><span class="line">torusKnot.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect17.png" alt="效果图" /></p>
<h3 id="添加透明贴图"><a class="markdownIt-Anchor" href="#添加透明贴图">#</a> 添加透明贴图</h3>
<p>我用这张图片给立方体做一个透明贴图<br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect18.png" alt="效果图" /><br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> alphaTexture = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">TextureLoader</span>().<span class="title function_">load</span>(<span class="string">&quot;./texture/16.jpg&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> material3 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="number">0xffcccc</span>,</span><br><span class="line">  <span class="attr">alphaMap</span>: alphaTexture,</span><br><span class="line">  <span class="attr">transparent</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">side</span>: <span class="variable constant_">THREE</span>.<span class="property">DoubleSide</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect19.png" alt="效果图" /></p>
<h3 id="透明阴影检测"><a class="markdownIt-Anchor" href="#透明阴影检测">#</a> 透明阴影检测</h3>
<p>我们可以看到我们的物体的确透明了，但是阴影并没有随之变化，这里我们只需要加上一个属性即可<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> material3 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="number">0xffcccc</span>,</span><br><span class="line">  <span class="attr">alphaMap</span>: alphaTexture,</span><br><span class="line">  <span class="attr">transparent</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">side</span>: <span class="variable constant_">THREE</span>.<span class="property">DoubleSide</span>,</span><br><span class="line">  <span class="attr">alphaTest</span>: <span class="number">0.5</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect20.png" alt="效果图" /></p>
<h3 id="消除因为计算导致的物体阴影条纹"><a class="markdownIt-Anchor" href="#消除因为计算导致的物体阴影条纹">#</a> 消除因为计算导致的物体阴影条纹</h3>
<p>我们可以看到因为计算透明阴影，导致了我们物体上有条纹，这个我们可以通过调整阴影的偏移量和选择背面来计算阴影来缓解这个问题</p>
<h4 id="通过背面计算"><a class="markdownIt-Anchor" href="#通过背面计算">#</a> 通过背面计算</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> material3 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">  <span class="attr">color</span>: <span class="number">0xffcccc</span>,</span><br><span class="line">  <span class="attr">alphaMap</span>: alphaTexture,</span><br><span class="line">  <span class="attr">transparent</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">side</span>: <span class="variable constant_">THREE</span>.<span class="property">DoubleSide</span>,</span><br><span class="line">  <span class="attr">alphaTest</span>: <span class="number">0.5</span>,</span><br><span class="line">  <span class="attr">shadowSide</span>: <span class="variable constant_">THREE</span>.<span class="property">BackSide</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<h4 id="调整阴影偏移量"><a class="markdownIt-Anchor" href="#调整阴影偏移量">#</a> 调整阴影偏移量</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pointLight.<span class="property">shadow</span>.<span class="property">bias</span> = -<span class="number">0.01</span>;</span><br></pre></td></tr></table></figure><br />
 此时条纹的情况就会好很多了<br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect21.png" alt="效果图" /></p>
<h2 id="级联阴影"><a class="markdownIt-Anchor" href="#级联阴影">#</a> 级联阴影</h2>
<h3 id="为什么需要级联阴影"><a class="markdownIt-Anchor" href="#为什么需要级联阴影">#</a> 为什么需要级联阴影</h3>
<h4 id="代码回滚"><a class="markdownIt-Anchor" href="#代码回滚">#</a> 代码回滚</h4>
<p>讲这个我们先把代码回滚成之前平行光的时候<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入threejs</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="variable constant_">THREE</span> <span class="keyword">from</span> <span class="string">&quot;three&quot;</span>;</span><br><span class="line"><span class="comment">// 导入轨道控制器</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">OrbitControls</span> &#125; <span class="keyword">from</span> <span class="string">&quot;three/examples/jsm/controls/OrbitControls.js&quot;</span>;</span><br><span class="line"><span class="comment">// 导入lil.gui</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">GUI</span> &#125; <span class="keyword">from</span> <span class="string">&quot;three/examples/jsm/libs/lil-gui.module.min.js&quot;</span>;</span><br><span class="line"><span class="comment">// 导入hdr加载器</span></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">RGBELoader</span> &#125; <span class="keyword">from</span> <span class="string">&quot;three/examples/jsm/loaders/RGBELoader.js&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建场景</span></span><br><span class="line"><span class="keyword">const</span> scene = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Scene</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建相机</span></span><br><span class="line"><span class="keyword">const</span> camera = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PerspectiveCamera</span>(</span><br><span class="line">    <span class="number">45</span>, <span class="comment">// 视角</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">innerWidth</span> / <span class="variable language_">window</span>.<span class="property">innerHeight</span>, <span class="comment">// 宽高比</span></span><br><span class="line">    <span class="number">0.1</span>, <span class="comment">// 近平面</span></span><br><span class="line">    <span class="number">1000</span> <span class="comment">// 远平面</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建渲染器</span></span><br><span class="line"><span class="keyword">const</span> renderer = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">WebGLRenderer</span>(&#123;</span><br><span class="line">    <span class="attr">antialias</span>: <span class="literal">true</span>, <span class="comment">// 开启抗锯齿</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 设置渲染器允许投射阴影</span></span><br><span class="line">renderer.<span class="property">shadowMap</span>.<span class="property">enabled</span> = <span class="literal">true</span>;</span><br><span class="line">renderer.<span class="title function_">setSize</span>(<span class="variable language_">window</span>.<span class="property">innerWidth</span>, <span class="variable language_">window</span>.<span class="property">innerHeight</span>);</span><br><span class="line">renderer.<span class="property">outputColorSpace</span> = <span class="variable constant_">THREE</span>.<span class="property">SRGBColorSpace</span>;</span><br><span class="line">renderer.<span class="property">toneMapping</span> = <span class="variable constant_">THREE</span>.<span class="property">ACESFilmicToneMapping</span>;</span><br><span class="line">renderer.<span class="property">toneMappingExposure</span> = <span class="number">1</span>;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(renderer.<span class="property">domElement</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置相机位置</span></span><br><span class="line">camera.<span class="property">position</span>.<span class="property">z</span> = <span class="number">15</span>;</span><br><span class="line">camera.<span class="property">position</span>.<span class="property">y</span> = <span class="number">2.4</span>;</span><br><span class="line">camera.<span class="property">position</span>.<span class="property">x</span> = <span class="number">0.4</span>;</span><br><span class="line">camera.<span class="title function_">lookAt</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加世界坐标辅助器</span></span><br><span class="line"><span class="keyword">const</span> axesHelper = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">AxesHelper</span>(<span class="number">5</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(axesHelper);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加轨道控制器</span></span><br><span class="line"><span class="keyword">const</span> controls = <span class="keyword">new</span> <span class="title class_">OrbitControls</span>(camera, renderer.<span class="property">domElement</span>);</span><br><span class="line"><span class="comment">// 设置带阻尼的惯性</span></span><br><span class="line">controls.<span class="property">enableDamping</span> = <span class="literal">true</span>;</span><br><span class="line"><span class="comment">// 设置阻尼系数</span></span><br><span class="line">controls.<span class="property">dampingFactor</span> = <span class="number">0.05</span>;</span><br><span class="line"><span class="comment">// 设置旋转速度</span></span><br><span class="line"><span class="comment">// controls.autoRotate = true;</span></span><br><span class="line">controls.<span class="title function_">addEventListener</span>(<span class="string">&quot;change&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    renderer.<span class="title function_">render</span>(scene, camera);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 渲染函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">animate</span>(<span class="params"></span>) &#123;</span><br><span class="line">    controls.<span class="title function_">update</span>();</span><br><span class="line">    <span class="title function_">requestAnimationFrame</span>(animate);</span><br><span class="line">    <span class="comment">// 渲染</span></span><br><span class="line">    renderer.<span class="title function_">render</span>(scene, camera);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">animate</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听窗口变化</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;resize&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 重置渲染器宽高比</span></span><br><span class="line">    renderer.<span class="title function_">setSize</span>(<span class="variable language_">window</span>.<span class="property">innerWidth</span>, <span class="variable language_">window</span>.<span class="property">innerHeight</span>);</span><br><span class="line">    <span class="comment">// 重置相机宽高比</span></span><br><span class="line">    camera.<span class="property">aspect</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span> / <span class="variable language_">window</span>.<span class="property">innerHeight</span>;</span><br><span class="line">    <span class="comment">// 更新相机投影矩阵</span></span><br><span class="line">    camera.<span class="title function_">updateProjectionMatrix</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建GUI</span></span><br><span class="line"><span class="keyword">const</span> gui = <span class="keyword">new</span> <span class="title function_">GUI</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// rgbeLoader 加载hdr贴图</span></span><br><span class="line"><span class="keyword">let</span> rgbeLoader = <span class="keyword">new</span> <span class="title class_">RGBELoader</span>();</span><br><span class="line">rgbeLoader.<span class="title function_">load</span>(<span class="string">&quot;./texture/Video_Copilot-Back Light_0007_4k.hdr&quot;</span>, <span class="function">(<span class="params">envMap</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 设置球形贴图</span></span><br><span class="line">    envMap.<span class="property">mapping</span> = <span class="variable constant_">THREE</span>.<span class="property">EquirectangularReflectionMapping</span>;</span><br><span class="line">    <span class="comment">// 设置环境贴图</span></span><br><span class="line">    scene.<span class="property">background</span> = envMap;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> geometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">TorusKnotGeometry</span>(<span class="number">1</span>, <span class="number">0.3</span>, <span class="number">100</span>, <span class="number">16</span>);</span><br><span class="line"><span class="keyword">const</span> material1 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">    <span class="attr">color</span>: <span class="number">0xccccff</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> torusKnot = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(geometry, material1);</span><br><span class="line">torusKnot.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">4</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(torusKnot);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> sphereGeometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">SphereGeometry</span>(<span class="number">1</span>, <span class="number">32</span>, <span class="number">32</span>);</span><br><span class="line"><span class="keyword">const</span> material2 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">    <span class="attr">color</span>: <span class="number">0xffffff</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> sphere = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(sphereGeometry, material2);</span><br><span class="line">sphere.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br><span class="line">sphere.<span class="property">receiveShadow</span> = <span class="literal">true</span>;</span><br><span class="line">scene.<span class="title function_">add</span>(sphere);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> boxGeometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">BoxGeometry</span>(<span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">const</span> material3 = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">    <span class="attr">color</span>: <span class="number">0xffcccc</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> box = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(boxGeometry, material3);</span><br><span class="line">box.<span class="property">position</span>.<span class="title function_">set</span>(-<span class="number">4</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(box);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建平面</span></span><br><span class="line"><span class="keyword">let</span> planeGeometry = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">PlaneGeometry</span>(<span class="number">24</span>, <span class="number">24</span>, <span class="number">1</span>, <span class="number">1</span>);</span><br><span class="line"><span class="keyword">let</span> planeMaterial = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">MeshPhysicalMaterial</span>(&#123;</span><br><span class="line">    <span class="attr">color</span>: <span class="number">0x999999</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">let</span> planeMesh = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Mesh</span>(planeGeometry, planeMaterial);</span><br><span class="line">planeMesh.<span class="property">rotation</span>.<span class="property">x</span> = -<span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">2</span>;</span><br><span class="line">planeMesh.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, -<span class="number">1</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(planeMesh);</span><br><span class="line"><span class="comment">// 设置接收阴影</span></span><br><span class="line">planeMesh.<span class="property">receiveShadow</span> = <span class="literal">true</span>;</span><br><span class="line">planeMesh.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加环境光</span></span><br><span class="line"><span class="keyword">let</span> ambientLight = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">AmbientLight</span>(<span class="number">0xffffff</span>, <span class="number">0.1</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(ambientLight);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加平行光</span></span><br><span class="line"><span class="keyword">let</span> directionalLight = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">DirectionalLight</span>(<span class="number">0xffffff</span>, <span class="number">0.6</span>);</span><br><span class="line">directionalLight.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">10</span>, <span class="number">10</span>, <span class="number">0</span>);</span><br><span class="line"><span class="comment">// 默认平行光的目标是原点</span></span><br><span class="line">directionalLight.<span class="property">target</span>.<span class="property">position</span>.<span class="title function_">set</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(directionalLight);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置光投射阴影</span></span><br><span class="line">directionalLight.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加平行光辅助器</span></span><br><span class="line"><span class="keyword">let</span> directionalLightHelper = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">DirectionalLightHelper</span>(directionalLight);</span><br><span class="line">scene.<span class="title function_">add</span>(directionalLightHelper);</span><br><span class="line"></span><br><span class="line">gui.<span class="title function_">add</span>(sphere.<span class="property">position</span>, <span class="string">&quot;z&quot;</span>, -<span class="number">10</span>, <span class="number">10</span>).<span class="title function_">name</span>(<span class="string">&quot;z&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(directionalLight);</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">left</span> = -<span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">right</span> = <span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">top</span> = <span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">bottom</span> = -<span class="number">10</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">near</span> = <span class="number">0.5</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">far</span> = <span class="number">50</span>;</span><br><span class="line"><span class="comment">// 设置阴影的纹理大小</span></span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">width</span> = <span class="number">2048</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">height</span> = <span class="number">2048</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect5.png" alt="效果图" /></p>
<h4 id="开启相机辅助器"><a class="markdownIt-Anchor" href="#开启相机辅助器">#</a> 开启相机辅助器</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> cameraHelper = <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">CameraHelper</span>(directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>);</span><br><span class="line">scene.<span class="title function_">add</span>(cameraHelper);</span><br></pre></td></tr></table></figure><br />
 我们可以通过相机辅助器看到我们的相机的范围，此时有部分阴影被裁剪了<br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect22.png" alt="效果图" /></p>
<p>按照我们之前的做法，就是将相机的范围调整一下</p>
<h4 id="调整相机范围"><a class="markdownIt-Anchor" href="#调整相机范围">#</a> 调整相机范围</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">left</span> = -<span class="number">100</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">right</span> = <span class="number">100</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">top</span> = <span class="number">100</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">bottom</span> = -<span class="number">100</span>;</span><br></pre></td></tr></table></figure><br />
<img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect23.png" alt="效果图" /></p>
<h4 id="锯齿感问题"><a class="markdownIt-Anchor" href="#锯齿感问题">#</a> 锯齿感问题</h4>
<p><img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect24.png" alt="效果图" /><br />
我们可以看到虽然我们的阴影的确不被切割了，能完整显示了，但是当我们把相机拖近，物体的阴影就会非常模糊，这是因为我们把 2048*2048 的大小分配给了一个非常大的范围，这个范围内的物体都会有阴影，每个点位分配得到的像素就会少，那我们增大阴影的纹理大小呗，这当然是不可取的，如果范围特别大，我们不可能一直增加这个阴影的纹理大小，这样会导致性能的消耗非常大，那么我们就需要级联阴影了。</p>
<h3 id="级联阴影的使用"><a class="markdownIt-Anchor" href="#级联阴影的使用">#</a> 级联阴影的使用</h3>
<h4 id="去除自己设置阴影代码"><a class="markdownIt-Anchor" href="#去除自己设置阴影代码">#</a> 去除自己设置阴影代码</h4>
<p>首先我们把这些自己设置阴影的代码去除了<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">directionalLight.<span class="property">castShadow</span> = <span class="literal">true</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">left</span> = -<span class="number">100</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">right</span> = <span class="number">100</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">top</span> = <span class="number">100</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">bottom</span> = -<span class="number">100</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">near</span> = <span class="number">0.5</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">camera</span>.<span class="property">far</span> = <span class="number">50</span>;</span><br><span class="line"><span class="comment">// 设置阴影的纹理大小</span></span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">width</span> = <span class="number">2048</span>;</span><br><span class="line">directionalLight.<span class="property">shadow</span>.<span class="property">mapSize</span>.<span class="property">height</span> = <span class="number">2048</span>;</span><br></pre></td></tr></table></figure></p>
<h4 id="导入级联阴影"><a class="markdownIt-Anchor" href="#导入级联阴影">#</a> 导入级联阴影</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="variable constant_">CSM</span> &#125; <span class="keyword">from</span> <span class="string">&quot;three/addons/csm/CSM.js&quot;</span>;</span><br></pre></td></tr></table></figure></p>
<h4 id="创建csm"><a class="markdownIt-Anchor" href="#创建csm">#</a> 创建 csm</h4>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> params = &#123;</span><br><span class="line">  <span class="attr">orthographic</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">fade</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">far</span>: <span class="number">1000</span>,</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&quot;practical&quot;</span>,</span><br><span class="line">  <span class="attr">lightX</span>: -<span class="number">1</span>,</span><br><span class="line">  <span class="attr">lightY</span>: -<span class="number">1</span>,</span><br><span class="line">  <span class="attr">lightZ</span>: -<span class="number">1</span>,</span><br><span class="line">  <span class="attr">margin</span>: <span class="number">100</span>,</span><br><span class="line">  <span class="attr">lightFar</span>: <span class="number">1000</span>,</span><br><span class="line">  <span class="attr">lightNear</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">autoUpdateHelper</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">updateHelper</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    csmHelper.<span class="title function_">update</span>();</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> csm = <span class="keyword">new</span> <span class="title function_">CSM</span>(&#123;</span><br><span class="line">  <span class="attr">maxFar</span>: params.<span class="property">far</span>,</span><br><span class="line">  <span class="attr">cascades</span>: <span class="number">4</span>,</span><br><span class="line">  <span class="attr">parent</span>: scene,</span><br><span class="line">  <span class="attr">shadowMapSize</span>: <span class="number">1024</span>,</span><br><span class="line">  <span class="attr">lightDirection</span>: <span class="keyword">new</span> <span class="variable constant_">THREE</span>.<span class="title class_">Vector3</span>(</span><br><span class="line">    params.<span class="property">lightX</span>,</span><br><span class="line">    params.<span class="property">lightY</span>,</span><br><span class="line">    params.<span class="property">lightZ</span></span><br><span class="line">  ).<span class="title function_">normalize</span>(),</span><br><span class="line">  <span class="attr">camera</span>: camera,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<h3 id="更新csm参数"><a class="markdownIt-Anchor" href="#更新csm参数">#</a> 更新 csm 参数</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">csm.<span class="title function_">updateFrustums</span>();</span><br></pre></td></tr></table></figure></p>
<h3 id="在渲染函数中渲染csm"><a class="markdownIt-Anchor" href="#在渲染函数中渲染csm">#</a> 在渲染函数中渲染 csm</h3>
<p>在 animate 中添加 <code>camera.updateMatrixWorld();csm.update();</code> <br />
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 渲染函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">animate</span>(<span class="params"></span>) &#123;</span><br><span class="line">  controls.<span class="title function_">update</span>();</span><br><span class="line">  camera.<span class="title function_">updateMatrixWorld</span>();</span><br><span class="line">  csm.<span class="title function_">update</span>();</span><br><span class="line">  <span class="title function_">requestAnimationFrame</span>(animate);</span><br><span class="line">  <span class="comment">// 渲染</span></span><br><span class="line">  renderer.<span class="title function_">render</span>(scene, camera);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="给各个材质添加阴影"><a class="markdownIt-Anchor" href="#给各个材质添加阴影">#</a> 给各个材质添加阴影</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">csm.<span class="title function_">setupMaterial</span>(material1);</span><br></pre></td></tr></table></figure><br />
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">csm.<span class="title function_">setupMaterial</span>(material2);</span><br></pre></td></tr></table></figure><br />
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">csm.<span class="title function_">setupMaterial</span>(material3);</span><br></pre></td></tr></table></figure><br />
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">csm.<span class="title function_">setupMaterial</span>(planeMaterial);</span><br></pre></td></tr></table></figure></p>
<h3 id="修改光源的方向应该和csm的方向一致"><a class="markdownIt-Anchor" href="#修改光源的方向应该和csm的方向一致">#</a> 修改光源的方向应该和 csm 的方向一致</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">directionalLight.<span class="property">position</span></span><br><span class="line">    .<span class="title function_">set</span>(params.<span class="property">lightX</span>, params.<span class="property">lightY</span>, params.<span class="property">lightZ</span>)</span><br><span class="line">    .<span class="title function_">normalize</span>()</span><br><span class="line">    .<span class="title function_">multiplyScalar</span>(-<span class="number">200</span>);</span><br></pre></td></tr></table></figure></p>
<h3 id="渲染器接受软阴影"><a class="markdownIt-Anchor" href="#渲染器接受软阴影">#</a> 渲染器接受软阴影</h3>
<p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">renderer.<span class="property">shadowMap</span>.<span class="property">type</span> = <span class="variable constant_">THREE</span>.<span class="property">PCFSoftShadowMap</span>;</span><br></pre></td></tr></table></figure></p>
<p><img data-src="https://gujyang.gitee.io/image-save-5/after-three/1/effect25.png" alt="效果图" /></p>
<h3 id="渐变效果"><a class="markdownIt-Anchor" href="#渐变效果">#</a> 渐变效果</h3>
<p>这个有点不太明显，大家可以看着加<br />
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">csm.<span class="property">fade</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure></p>
<h1 id="结语"><a class="markdownIt-Anchor" href="#结语">#</a> 结语</h1>
<p>本篇文章就讲到这里了，更多内容大家敬请期待～～～～</p>

      <div class="tags">
          <a href="/test-blog/tags/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%AD%A6%E4%B9%A0/" rel="tag"><i class="ic i-tag"></i> 可视化学习</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2024-02-08 10:12:14" itemprop="dateModified" datetime="2024-02-08T10:12:14+08:00">2024-02-08</time>
  </span>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>Codesigner： </strong>顾炯洋/codesigner <i class="ic i-at"><em>@</em></i>blog-of-codesigner(顾炯洋)
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="http://gujyang.gitee.io/test-blog/2024/02/08/after-three-1/" title="测试博客">http://gujyang.gitee.io/test-blog/2024/02/08/after-three-1/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
    </div>
    <div class="item right">
    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text"> 前言</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%81%AF%E5%85%89%E5%92%8C%E9%98%B4%E5%BD%B1"><span class="toc-number">1.1.</span> <span class="toc-text"> 灯光和阴影</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E5%88%9B%E5%BB%BA%E5%92%8C%E7%89%A9%E4%BD%93%E7%8E%AF%E5%A2%83%E8%B4%B4%E5%9B%BE%E6%B7%BB%E5%8A%A0"><span class="toc-number">1.1.1.</span> <span class="toc-text"> 基础创建和物体环境贴图添加</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%8E%AF%E5%A2%83%E5%85%89"><span class="toc-number">1.1.2.</span> <span class="toc-text"> 环境光</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B9%B3%E8%A1%8C%E5%85%89"><span class="toc-number">1.1.3.</span> <span class="toc-text"> 平行光</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B9%B3%E8%A1%8C%E5%85%89%E8%BE%85%E5%8A%A9%E5%99%A8"><span class="toc-number">1.1.4.</span> <span class="toc-text"> 平行光辅助器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%97%E9%98%B4%E5%BD%B1%E5%92%8C%E6%8A%95%E5%B0%84%E9%98%B4%E5%BD%B1"><span class="toc-number">1.1.5.</span> <span class="toc-text"> 接受阴影和投射阴影</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E6%B8%B2%E6%9F%93%E5%99%A8%E5%85%81%E8%AE%B8%E6%8A%95%E5%B0%84%E9%98%B4%E5%BD%B1"><span class="toc-number">1.1.5.1.</span> <span class="toc-text"> 设置渲染器允许投射阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%B9%B3%E8%A1%8C%E5%85%89%E5%85%81%E8%AE%B8%E6%8A%95%E5%B0%84%E9%98%B4%E5%BD%B1"><span class="toc-number">1.1.5.2.</span> <span class="toc-text"> 设置平行光允许投射阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%B9%B3%E9%9D%A2%E6%8E%A5%E5%8F%97%E9%98%B4%E5%BD%B1"><span class="toc-number">1.1.5.3.</span> <span class="toc-text"> 设置平面接受阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E7%89%A9%E4%BD%93%E6%8A%95%E5%B0%84%E6%8E%A5%E5%8F%97%E9%98%B4%E5%BD%B1"><span class="toc-number">1.1.5.4.</span> <span class="toc-text"> 设置物体投射接受阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%98%B4%E5%BD%B1%E8%A3%81%E5%89%AA%E9%97%AE%E9%A2%98"><span class="toc-number">1.1.5.5.</span> <span class="toc-text"> 阴影裁剪问题</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0%E4%B8%8E%E4%BA%A7%E7%94%9F%E5%8E%9F%E5%9B%A0"><span class="toc-number">1.1.5.5.1.</span> <span class="toc-text"> 问题描述与产生原因</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">1.1.5.5.2.</span> <span class="toc-text"> 解决方案</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%B0%83%E6%95%B4%E6%9C%80%E8%BF%9C%E8%B7%9D%E7%A6%BB"><span class="toc-number">1.1.5.5.3.</span> <span class="toc-text"> 调整最远距离</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%98%B4%E5%BD%B1%E9%94%AF%E9%BD%BF%E6%84%9F"><span class="toc-number">1.1.5.6.</span> <span class="toc-text"> 阴影锯齿感</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%81%9A%E5%85%89%E7%81%AF%E5%B1%9E%E6%80%A7%E8%AF%A6%E8%A7%A3"><span class="toc-number">1.2.</span> <span class="toc-text"> 聚光灯属性详解</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%9A%E5%85%89%E7%81%AF%E6%B7%BB%E5%8A%A0%E5%B9%B6%E8%AE%BE%E7%BD%AE%E9%98%B4%E5%BD%B1"><span class="toc-number">1.2.1.</span> <span class="toc-text"> 聚光灯添加并设置阴影</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%9A%E5%85%89%E7%81%AF%E8%BE%85%E5%8A%A9%E5%99%A8"><span class="toc-number">1.2.2.</span> <span class="toc-text"> 聚光灯辅助器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%9A%E5%85%89%E7%81%AF%E8%A7%92%E5%BA%A6"><span class="toc-number">1.2.3.</span> <span class="toc-text"> 聚光灯角度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%9A%E5%85%89%E7%81%AF%E8%B7%9D%E7%A6%BB"><span class="toc-number">1.2.4.</span> <span class="toc-text"> 聚光灯距离</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%81%9A%E5%85%89%E7%81%AF%E8%A1%B0%E5%87%8F"><span class="toc-number">1.2.5.</span> <span class="toc-text"> 聚光灯衰减</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%B4%E5%BD%B1%E7%BA%B9%E7%90%86%E5%A4%A7%E5%B0%8F"><span class="toc-number">1.2.6.</span> <span class="toc-text"> 阴影纹理大小</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%82%B9%E5%85%89%E6%BA%90"><span class="toc-number">1.3.</span> <span class="toc-text"> 点光源</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E7%82%B9%E5%85%89%E6%BA%90"><span class="toc-number">1.3.1.</span> <span class="toc-text"> 创建点光源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%82%B9%E5%85%89%E6%BA%90%E9%98%B4%E5%BD%B1"><span class="toc-number">1.3.2.</span> <span class="toc-text"> 点光源阴影</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%82%B9%E5%85%89%E6%BA%90%E8%BE%85%E5%8A%A9%E5%99%A8"><span class="toc-number">1.3.3.</span> <span class="toc-text"> 点光源辅助器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%82%B9%E5%85%89%E6%BA%90%E8%B7%9D%E7%A6%BB"><span class="toc-number">1.3.4.</span> <span class="toc-text"> 点光源距离</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%82%B9%E5%85%89%E6%BA%90%E8%A1%B0%E5%87%8F"><span class="toc-number">1.3.5.</span> <span class="toc-text"> 点光源衰减</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%82%B9%E5%85%89%E6%BA%90%E6%B6%88%E9%99%A4%E9%94%AF%E9%BD%BF%E6%84%9F"><span class="toc-number">1.3.6.</span> <span class="toc-text"> 点光源消除锯齿感</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%B4%E5%BD%B1%E4%BD%9C%E7%94%A8%E9%80%8F%E6%98%8E%E5%BA%A6%E7%BA%B9%E7%90%86%E4%B8%8E%E9%98%B4%E5%BD%B1%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"><span class="toc-number">1.4.</span> <span class="toc-text"> 阴影作用透明度纹理与阴影常见问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B0%83%E6%95%B4%E9%98%B4%E5%BD%B1"><span class="toc-number">1.4.1.</span> <span class="toc-text"> 调整阴影</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%82%B9%E5%85%89%E6%BA%90%E8%B7%9D%E7%A6%BB-2"><span class="toc-number">1.4.1.1.</span> <span class="toc-text"> 点光源距离</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#box%E6%8E%A5%E5%8F%97%E6%8A%95%E5%B0%84%E9%98%B4%E5%BD%B1"><span class="toc-number">1.4.1.2.</span> <span class="toc-text"> box 接受投射阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#torusknot%E6%8E%A5%E5%8F%97%E6%8A%95%E5%B0%84%E9%98%B4%E5%BD%B1"><span class="toc-number">1.4.1.3.</span> <span class="toc-text"> torusKnot 接受投射阴影</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E9%80%8F%E6%98%8E%E8%B4%B4%E5%9B%BE"><span class="toc-number">1.4.2.</span> <span class="toc-text"> 添加透明贴图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%8F%E6%98%8E%E9%98%B4%E5%BD%B1%E6%A3%80%E6%B5%8B"><span class="toc-number">1.4.3.</span> <span class="toc-text"> 透明阴影检测</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B6%88%E9%99%A4%E5%9B%A0%E4%B8%BA%E8%AE%A1%E7%AE%97%E5%AF%BC%E8%87%B4%E7%9A%84%E7%89%A9%E4%BD%93%E9%98%B4%E5%BD%B1%E6%9D%A1%E7%BA%B9"><span class="toc-number">1.4.4.</span> <span class="toc-text"> 消除因为计算导致的物体阴影条纹</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E8%83%8C%E9%9D%A2%E8%AE%A1%E7%AE%97"><span class="toc-number">1.4.4.1.</span> <span class="toc-text"> 通过背面计算</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B0%83%E6%95%B4%E9%98%B4%E5%BD%B1%E5%81%8F%E7%A7%BB%E9%87%8F"><span class="toc-number">1.4.4.2.</span> <span class="toc-text"> 调整阴影偏移量</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BA%A7%E8%81%94%E9%98%B4%E5%BD%B1"><span class="toc-number">1.5.</span> <span class="toc-text"> 级联阴影</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E7%BA%A7%E8%81%94%E9%98%B4%E5%BD%B1"><span class="toc-number">1.5.1.</span> <span class="toc-text"> 为什么需要级联阴影</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E5%9B%9E%E6%BB%9A"><span class="toc-number">1.5.1.1.</span> <span class="toc-text"> 代码回滚</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BC%80%E5%90%AF%E7%9B%B8%E6%9C%BA%E8%BE%85%E5%8A%A9%E5%99%A8"><span class="toc-number">1.5.1.2.</span> <span class="toc-text"> 开启相机辅助器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B0%83%E6%95%B4%E7%9B%B8%E6%9C%BA%E8%8C%83%E5%9B%B4"><span class="toc-number">1.5.1.3.</span> <span class="toc-text"> 调整相机范围</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%94%AF%E9%BD%BF%E6%84%9F%E9%97%AE%E9%A2%98"><span class="toc-number">1.5.1.4.</span> <span class="toc-text"> 锯齿感问题</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BA%A7%E8%81%94%E9%98%B4%E5%BD%B1%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.5.2.</span> <span class="toc-text"> 级联阴影的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%BB%E9%99%A4%E8%87%AA%E5%B7%B1%E8%AE%BE%E7%BD%AE%E9%98%B4%E5%BD%B1%E4%BB%A3%E7%A0%81"><span class="toc-number">1.5.2.1.</span> <span class="toc-text"> 去除自己设置阴影代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%BC%E5%85%A5%E7%BA%A7%E8%81%94%E9%98%B4%E5%BD%B1"><span class="toc-number">1.5.2.2.</span> <span class="toc-text"> 导入级联阴影</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%9B%E5%BB%BAcsm"><span class="toc-number">1.5.2.3.</span> <span class="toc-text"> 创建 csm</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9B%B4%E6%96%B0csm%E5%8F%82%E6%95%B0"><span class="toc-number">1.5.3.</span> <span class="toc-text"> 更新 csm 参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9C%A8%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0%E4%B8%AD%E6%B8%B2%E6%9F%93csm"><span class="toc-number">1.5.4.</span> <span class="toc-text"> 在渲染函数中渲染 csm</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%99%E5%90%84%E4%B8%AA%E6%9D%90%E8%B4%A8%E6%B7%BB%E5%8A%A0%E9%98%B4%E5%BD%B1"><span class="toc-number">1.5.5.</span> <span class="toc-text"> 给各个材质添加阴影</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9%E5%85%89%E6%BA%90%E7%9A%84%E6%96%B9%E5%90%91%E5%BA%94%E8%AF%A5%E5%92%8Ccsm%E7%9A%84%E6%96%B9%E5%90%91%E4%B8%80%E8%87%B4"><span class="toc-number">1.5.6.</span> <span class="toc-text"> 修改光源的方向应该和 csm 的方向一致</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E5%99%A8%E6%8E%A5%E5%8F%97%E8%BD%AF%E9%98%B4%E5%BD%B1"><span class="toc-number">1.5.7.</span> <span class="toc-text"> 渲染器接受软阴影</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C"><span class="toc-number">1.5.8.</span> <span class="toc-text"> 渐变效果</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BB%93%E8%AF%AD"><span class="toc-number">2.</span> <span class="toc-text"> 结语</span></a></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li class="active"><a href="/test-blog/2024/02/08/after-three-1/" rel="bookmark" title="测试博客">测试博客</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="顾炯洋/codesigner"
      data-src="/test-blog/images/avatar.jpg">
  <p class="name" itemprop="name">顾炯洋/codesigner</p>
  <div class="description" itemprop="description">记录成长</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/test-blog/archives/">
        <span class="count">1</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/test-blog/categories/">
        <span class="count">1</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/test-blog/tags/">
        <span class="count">1</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/test-blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>

    
  <li class="item">
    <a href="/test-blog/about/" rel="section"><i class="ic i-user"></i>关于</a>
  </li>

        
  <li class="item dropdown">
      <a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a>
    <ul class="submenu">

        
  <li class="item">
    <a href="/test-blog/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a>
  </li>

        
  <li class="item">
    <a href="/test-blog/categories/" rel="section"><i class="ic i-th"></i>分类</a>
  </li>

        
  <li class="item">
    <a href="/test-blog/tags/" rel="section"><i class="ic i-tags"></i>标签</a>
  </li>

  </ul>

</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/test-blog/categories/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%AD%A6%E4%B9%A0/" title="分类于 可视化学习">可视化学习</a>
</div>

    <span><a href="/test-blog/2024/02/08/after-three-1/" title="测试博客">测试博客</a></span>
  </li>

  </ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2023 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">顾炯洋/codesigner @ Codesigner</span>
  </div>
  <div class="count">
    <span class="post-meta-item-icon">
      <i class="ic i-chart-area"></i>
    </span>
    <span title="站点总字数">14k 字</span>

    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="ic i-coffee"></i>
    </span>
    <span title="站点阅读时长">12 分钟</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2024/02/08/after-three-1/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/test-blog/js/app.js?v=0.2.5"></script>




</body>
</html>
